<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    show-footer
    transfer
    width="600"
    destroy-on-close
    :loading="listLoading"
    @close="close"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :data="form"
        :rules="rules"
        title-align="right"
        title-width="120"
        prevent-submit
        custom-layout
      >
        <vxe-form-item title="岗位名称" field="name" span="24">
          <template #default>
            <el-input v-model="form.name" placeholder="岗位名称" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="岗位编码" span="24" field="code">
          <template #default>
            <el-input v-model="form.code" placeholder="请输入岗位编码" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="状态" span="24" field="status">
          <template #default>
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" span="24" field="remarks">
          <template #default>
            <el-input
              v-model="form.remarks"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="备注"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item title="排序" span="24" field="sort">
          <template #default>
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="1"
              :max="1000"
              :placeholder="'请输入排序'"
              style="width: 160px"
            />
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button type="primary" :loading="subListLoading" @click="save">
          <i class="icon-wpkj-save"></i>
          确定
        </el-button>
        <el-button type="danger" @click="close">取消</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  import { Finished } from '@element-plus/icons-vue'
  import { getPost, getPostSort, saveOrUpdate } from '@/api/system/post'

  export default defineComponent({
    name: 'PostEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const $XEUtils = inject('$XEUtils')
      const state = reactive({
        formRef: null,
        listLoading: false,
        subListLoading: false,
        form: {
          code: '',
          name: '',
          sort: '',
          status: null,
          remark: '',
        },
        rules: {
          code: [
            { required: true, message: '请输入编码', trigger: 'blur' },
            {
              min: 1,
              max: 100,
              message: '长度在 1 到 100 个字符',
              trigger: 'blur',
            },
          ],
          name: [
            { required: true, message: '请输入角色名', trigger: 'blur' },
            {
              min: 1,
              max: 100,
              message: '长度在 1 到 100 个字符',
              trigger: 'blur',
            },
          ],
          status: [
            {
              required: true,
              message: '请填写状态',
              trigger: 'blur',
            },
          ],
          sort: [
            {
              required: true,
              message: '请输入排序',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
        list: [],
      })

      const showEdit = async (row) => {
        state.dialogFormVisible = true
        state.listLoading = true
        if (!row) {
          state.title = '添加'
          const { code, data, msg } = await getPostSort().catch((err) => {
            state.listLoading = false
          })
          if (code === 0 || code === 200) {
            state.form.sort = data
          } else {
            $baseMessage(msg, 'error', 'vab-hey-message-success')
          }
        } else {
          state.title = '编辑'
          const { code, data, msg } = await getPost(row.id).catch((err) => {
            state.listLoading = false
          })
          if (code === 0 || code === 200) {
            state.form = data
          } else {
            $baseMessage(msg, 'error', 'vab-hey-message-success')
          }
        }
        state.listLoading = false
      }
      const close = () => {
        state['formRef'].reset()
        state.form = {
          code: '',
          name: '',
          sort: '',
          status: null,
          remark: '',
        }
        state.list = []
        state.dialogFormVisible = false
        state.listLoading = false
        state.subListLoading = false
      }

      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (!valid) {
            state.subListLoading = true
            const { code, msg, data } = await saveOrUpdate(state.form).catch(
              (err) => {
                state.subListLoading = false
              }
            )
            if (code === 0 || code === 200) {
              emit('fetch-data')
              close()
            } else {
              $baseMessage(message, 'error', 'vab-hey-message-success')
            }
          }
        })
      }
      onMounted(() => {})
      return {
        ...toRefs(state),
        Finished,
        showEdit,
        close,
        save,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }

  .el-container {
    height: calc(100vh - 155px);
  }
</style>
